<template>
	<view>
		<uv-navbar title="任务详情" bg-color="rgba(0,0,0,.0)" :placeholder='true' leftIconSize="20px"
			leftIconColor="#313C56" :autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<scroll-view :scroll-y="true" style=" margin-top: 5px; "
			:style="{ height: $uv.addUnit(scrollHeight), width: $uv.addUnit(screenWidth)}">
			<view class="" style="margin-left: 12px; margin-right: 12px; ">
				<view class="font-18 font-weight-medium" style="color: #313C56; ">
					{{ detail.name }}
				</view>
				<view class="font-18 font-weight-medium" style="color: #313C56; margin-top: 8px;">
					{{ detail.totalAmount }}
					<text style="color: #6B7885;" class="font-12 font-weight-regular">{{ detail.chainName }}</text>
				</view>
				<view class="flex-row flex-between flex-items-center"
					style="margin-top: 12px; border-radius: 12px; width: calc(100% - 24px); padding: 12px; background-color: white;">
					<view class="flex-row flex-items-center">
						<image :src="detail.bossHead" style="width: 40px; height: 40px; border-radius: 20px;">
						</image>
						<view class="flex-column" style="margin-left: 15px;">
							<view class="font-16 font-weight-medium flex-row flex-items-center"
								style="color: #333333; ">
								{{ detail.bossName }}
								<image v-if="detail.bossLevel === 0" src="../../static/user/b0.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
								<image v-if="detail.bossLevel === 1" src="../../static/user/b1.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
								<image v-if="detail.bossLevel === 2" src="../../static/user/b2.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
								<image v-if="detail.bossLevel === 3" src="../../static/user/b3.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
								<image v-if="detail.bossLevel === 4" src="../../static/user/b4.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
								<image v-if="detail.bossLevel === 5" src="../../static/user/b5.png"
									style="margin-left: 3px; width: 30px; min-width: 30px; max-width: 30px;"
									mode="widthFix"></image>
							</view>
							<view class="font-12 font-weight-regular" style="color: #0066FF; margin-top: 2px;"
								@click="memberDetails(detail.bossId)">
								查看主页
							</view>
						</view>
					</view>
					<!--					<image src="../../static/logo.png" style="width: 15px; height: 15px; margin-right: 17px;"></image>-->
				</view>
				<view class=""
					style="margin-top: 12px; border-radius: 12px; width: calc(100% - 32px); padding: 16px; background-color: white;">
					<view class="flex-row flex-items-center">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">任务内容</text>
					</view>
					<view class="font-14 font-weight-regular" style="color: #4F4F4F; margin-top: 8px;">
						{{ detail.detail }}
					</view>
					<view class="flex-row flex-items-center" style="margin-top: 15px;">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">图片</text>
					</view>
					<view class="flex-row flex-wrap" style="">
						<image v-for="(item, index) in detail.pics" :key="index"
							style="margin-top: 8px; border-radius: 6px; height: 80px; width: 80px; margin-right: 12px;"
							:src="item" @click="previewImage(index)">
						</image>
					</view>
					<view class="flex-row flex-items-center" style="margin-top: 15px;">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">附件</text>
					</view>
					<view v-for="(item,index) in detail.documents" :key="index"
						class="flex-row flex-items-center flex-between"
						style="padding: 15px 18px;  margin-top: 8px; border: 1px solid #EFF0F4; border-radius: 8px;">
						<view class="flex-row flex-items-center">
							<!--   TODO 文件图标, 下载链接 {{ item.detailUrl }}-->
							<image src="../../static/files.png" style="width: 28px; height: 28px;"></image>
							<view class="flex-column" style="margin-left: 15px;">
								<view class="font-14 font-weight-regular flex-row flex-items-center"
									style="color: #313C56; ">
									{{ item.name }}
								</view>
								<!--								<view class="font-12 font-weight-regular" style="color: #6B7885; margin-top: 0px;">-->
								<!--									200 KB-->
								<!--								</view>-->
							</view>
						</view>
						<!--   TODO 下载图标, 下载链接 {{ item.detailUrl }}-->
						<image src="../../static/download_.png" style="width: 15px; height: 15px;"
							@click="download(item.detailUrl)"></image>
					</view>
					<view class="flex-row flex-items-center" style="margin-top: 15px;">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">截止时间</text>
					</view>
					<view class="font-14 font-weight-regular" style="color: #4F4F4F; margin-top: 8px;">
						{{ detail.endTime }}
					</view>
				</view>
				<view class=""
					style="margin-top: 12px; border-radius: 12px; width: calc(100% - 32px); padding: 16px; background-color: white;">
					<view class="flex-row flex-items-center">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">任务金额</text>
					</view>
					<view v-for="(item, index) in detail.plans" :key="index"
						class="flex-row flex-items-center flex-between"
						style="padding: 12px;  margin-top: 8px; border: 1px solid #EFF0F4; border-radius: 8px;">
						<view class="flex-column">
							<text class="font-14 font-weight-medium"
								style="color: #313C56; font-weight: bolder">{{ `第 ${index + 1} 期` }}</text>
							<text class="font-14 font-weight-regular"
								style="color: #6B7885;">完成时间：{{ item.endTime }}</text>
						</view>
						<view class="flex-column flex-items-end">
							<view class="font-14 font-weight-medium" style="color: #313C56; font-weight: bolder">
								{{ item.amount }}
								<text class="font-14 font-weight-medium" style="color: #313C56;">{{ item.rate }} </text>
							</view>
							<text v-if="item.payStatus === 1" class="font-14 font-weight-regular"
								style="color: #313C56;"> 已支付</text>
							<text v-if="item.payStatus === 0" class="font-14 font-weight-regular"
								style="color: #EB7520;"> 未支付</text>
						</view>
					</view>
					<view class="flex-row flex-items-center" style="margin-top: 15px;">
						<view style="background-color: #EB7520; border-radius: 2px; height: 12px; width: 3px;"></view>
						<text class="font-16 font-weight-medium" style="color: #333333; margin-left: 10px;">用户保证金</text>
					</view>
					<view class="font-14 font-weight-regular" style="color: #4F4F4F; margin-top: 8px;">
						接下任务后需交纳保证金 {{ detail.digitalEarnest }} USDT
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="task-detail-toolbar" :style="{height: $uv.addUnit(toolbarHeight)}">
			<view class="flex-row flex-items-center flex-center" style="height: 68px; ">
				<!--				<view class="task-detail-toolbar__reset flex-row-center" @click="$refs.teamUpPopup.open()">-->
				<!--					组队-->
				<!--				</view>-->
				<view class="task-detail-toolbar__confirm flex-row-center" @click="showSuccessPopup()">
					立即报名
				</view>
			</view>
		</view>

		<uv-popup ref="successPopup" :closeOnClickOverlay="false" :safeAreaInsetBottom="false" round='10px'>
			<view class="flex-column-center" style="background-color: white; height: 86px; width: 279px;">
				<text class="font-18 font-weight-medium" style="color: #313C56;">报名成功</text>
				<text class="font-14 font-weight-regular" style="color: #6B7885; margin-top: 3px;">等待 BOSS
					选择合作队友...</text>
			</view>
		</uv-popup>

		<uv-popup ref="teamUpPopup" mode="bottom" :closeOnClickOverlay="false" :safeAreaInsetBottom="true" round='15px'
			bgColor="#FFFFFF">
			<view class="flex-column" style="background-color: white; width: 100vw;">
				<view class="flex-row flex-between flex-items-center"
					style="margin-top: 20px; margin-left: 12px; margin-right: 12px;">
					<text class="font-18 font-weight-regular" style="color: #000000;">组队邀请</text>
					<uv-icon name="close" size="24px" color="#6B7885" @click="$refs.teamUpPopup.close()"></uv-icon>
				</view>
				<uv-input placeholder="olivia@untitledui.com" v-model="searchKey" prefixIcon="search"
					prefixIconStyle="font-size: 20px;color: #6B7885; margin-left: 14px; margin-right: 8px;"
					:customStyle="{height: '40px',marginTop: '20px', marginLeft: '12px', marginRight: '12px',  borderRadius: '9px'}"></uv-input>
				<uv-tabs :list="tabs" customStyle="height:45px; marginTop: 6px"
					activeStyle="color:#313C56; fontWeight: 500; fontSize: 16px"
					inactiveStyle="color: #95A4B3; fontWight: 500; fontSize: 14px" lineColor="#EB7520" lineWidth="16px"
					lineHeight="4px" @click="tabsTap">
				</uv-tabs>
				<scroll-view :scroll-y="true"
					style="height: 290px; width: 100vw; background-color: white; margin-top: 5px;">
					<view v-for="(item,index) in frends" :key="index" class="flex-row flex-items-center"
						style="height: 64px;" @click="item.select = !item.select">
						<image :src="item.select ? '../../static/selected.png': '../../static/select.png'"
							style="width: 16px; height: 16px; margin-left: 16px;"></image>
						<view class="flex-row flex-items-center"
							style=" margin-left: 16px; height: 64px; width: calc(100vw - 60px); border-bottom-color: #D0D5DD; border-bottom-style: solid; border-bottom-width: 0.5px;">
							<image src="../../static/logo.png" style="width: 40px; height: 40px; border-radius: 20px;">
							</image>
							<text class="font-16 font-weight-regular"
								style="color: #313C56; margin-left: 10px;">{{ item.name }}</text>
						</view>
					</view>
				</scroll-view>
				<view class="font-16 font-weight-regular flex-row-center"
					style="margin: 16px; background-color: #EB7520; border-radius: 8px; color: white; height: 44px;">
					发送
				</view>
			</view>
		</uv-popup>
		<popup ref="popup2" msg="报名任务需要数字游民身份NFT，请前往购买!" btnTitle="前往" type="warning" @confirm="popupConfirm">
		</popup>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getProject,
		getUserCenter,
		projectOrder
	} from "../../api";
	export default {
		data() {
			return {
				projectId: 0,
				digitalLevel: -1,
				bossLevel: -1,
				detail: '',
				searchKey: '',
				// 0=公司， 1=团队， 2=个人
				tabIndex: 0,
				tabs: [{
					name: '最近'
				}, {
					name: '好友'
				}, {
					name: '群组'
				}],
				frends: []
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 10
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad(info) {
			if (info.type) {
				this.type = parseInt(info.type)
			} else {
				this.type = 0
			}
			this.getProject(info.id)
      this.getUserCenter()
		},
		methods: {
			/**
			 * 上传文件
			 */
			download(url) {
				// #ifdef H5
				window.location.href = url
				// #endif
			},
			previewImage(index) {
				uni.previewImage({
					urls: this.detail.pics,
					current: index
				})
			},
			tabsTap(e) {
				this.tabIndex = e.index
			},

			/**
			 * 详情跳转
			 */
			memberDetails(id) {
				uni.navigateTo({
					url: '/pages/person-detail/person-detail?userId=' + id + "&sys=0"
				})
			},

			getProject(id) {
				let params = {
					id: id
				}
				getProject(params).then((data) => {
					this.detail = data
					console.error(this.detail)
					this.projectId = data.id
					this.skills = data.skills
					this.experiences = data.experience
					this.comments = data.comments
				}).catch((e) => {})
			},

			popupConfirm() {
				uni.navigateTo({
					url: '/pages/wallet/wallet'
				})
			},

			async showSuccessPopup() {
				if (this.digitalLevel == -1) {
					this.$refs.toast.show({
						msg: '请登录后继续操作!'
					})
					return
				}
				if (this.digitalLevel == 0) {
					this.$refs.popup2.open()
					return
				}
				await this.projectOrder_()
			},

			getUserCenter() {
				getUserCenter().then((data) => {
					if (data) {
						this.bossLevel = data.bossLevel
						this.digitalLevel = data.digitalLevel
					}
				}).catch((res) => {})
			},

			projectOrder_() {
				let params = {
					projectId: this.projectId,
				}
				projectOrder(params).then((data) => {
					this.$refs.successPopup.open()
					setTimeout(() => {
						this.$refs.successPopup.close()
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}, 2500);
				}).catch((res) => {
					console.log(JSON.stringify(res))
				})
			},

		}
	}
</script>

<style lang="scss">
	.task-detail-toolbar__confirm {
		margin-left: 15px;
		color: white;
		border-radius: 8px;
		background-color: #EB7520;
		height: 44px;
		width: 215px;
	}

	.task-detail-toolbar__reset {
		color: #EB7520;
		border-radius: 8px;
		border: 1px solid #EB7520;
		height: 44px;
		width: 72px;
	}

	.task-detail-toolbar {
		position: absolute;
		left: 0px;
		bottom: 0px;
		width: 100vw;
		background-color: white;
		font-size: 16px;
		font-weight: 400;
		border-top-color: #F3F5FB;
		border-top-width: 1px;
		border-top-style: solid;
	}
</style>